<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1-日期和表单校验</title>
	</head>
	
	<!-- 引入element的css样式 -->
	<link rel="stylesheet" href="../../lib/element/index.css" />
	<script type="text/javascript" src="../../lib/vue/vue.min.js" ></script>
	<!-- 引入element的js在vue引入之后 -->
	<script type="text/javascript" src="../../lib/element/index.js" ></script>
	
	<body>

	<h1>hello world</h1>
	<!-- button 的 hello world -->
	<div id="app">
	    <el-button @click="visible = true">Button</el-button>
	    <el-dialog :visible.sync="visible" title="Hello world">
	      <p>Try Element</p>
	    </el-dialog>
    </div>
	<script>
	    new Vue({
	      el: '#app',
	      data: { visible: false }
	    })
  	</script>
	
	
	<h1>组件</h1>
	<div id="app2">
		<template>
		<h2>日期</h2>
		  <div class="block">
		    <span >默认</span>
		    <el-date-picker
		      v-model="dateVal.value1"
		      type="date"
		      placeholder="选择日期">
		    </el-date-picker>
		  </div>
		  <div>
		    <span>带快捷选项</span>
		    <el-date-picker
		      v-model="dateVal.value2"
		      align="right"
		      type="date"
		      placeholder="选择日期"
		      :picker-options="pickerOptions1">
		    </el-date-picker>
		  </div>
		  <h2>计数器</h2>
		  <el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number>
		</template>
		<div>
			<h2>v-if判断null和[]</h2>
			<font color="red" v-if="list==null">list == null</font><br />
			<font color="red" v-if="list2">list2 == []</font><br />
			<font color="red" v-if="str == ''">str == '' </font><br />
			<font color="red" v-if="str2 == null ">str2 == null </font>
		</div>
	</div>
	
	<script>
	  new Vue ({
	  	el:"#app2",
	    data() {
	      return {
	        pickerOptions1: {
	          disabledDate(time) {
	            return time.getTime() > Date.now();
	          },
	          shortcuts: [{
	            text: '今天',
	            onClick(picker) {
	              picker.$emit('pick', new Date());
	            }
	          }, {
	            text: '昨天',
	            onClick(picker) {
	              const date = new Date();
	              date.setTime(date.getTime() - 3600 * 1000 * 24);
	              picker.$emit('pick', date);
	            }
	          }, {
	            text: '一周前',
	            onClick(picker) {
	              const date = new Date();
	              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', date);
	            }
	          }]
	        },
	        value1: '',
	        value2: '',
	        dateVal : {value1:"",value2:""},
	        num:0,
	        list: null,
	        list2: [],
	        str: "",
	        str2: null
	      };
	    }
	  });
	</script>
	
	<h1>表单校验</h1>
	<form  :model="ruleForm" :rules="rules" ref="ruleForm">
		<input v-model="ruleForm.name"></input>
	</form>
	
	<script type="text/javascript" src="../../lib/async-validator/index.js" ></script>
	<script type="text/javascript" src="../../lib/async-validator/rule/index.js" ></script>
	<script type="text/javascript" src="../../lib/async-validator/validator/index.js" ></script>
	<script>
		new Validator({
			data:function() {
		      return {
		        ruleForm: {
		        	name: ''
		        },
		        rules: {
		          name: [
		            { required: true, message: '请输入活动名称', trigger: 'blur' },
		            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
		          ]
		        }
		      };
    		},
    		methods: {
			    submitForm(formName) {
			        this.$refs[formName].validate((valid) => {
			        if (valid) {
			            alert('submit!');
			        } else {
			            console.log('error submit!!');
			            return false;
			          }
			        });
			    },
			    resetForm(formName) {
			        this.$refs[formName].resetFields();
			    }
		    }
		})
	</script>
	
	</body>
</html>
